<style scoped>
.vendorBrandSales {
  margin-right: 0.5vw;
  padding: 0 15px;
  background-color: white;
  height: 95vh;
  position: relative;
}
.top_msg {
  height: 66px;
  padding-top: 15px;
  border-bottom: 2px solid #f4f4f4;
  white-space: nowrap;
}
.top_msg p {
  display: inline-block;
  width: 65px;
  text-align: right;
  line-height: 30px;
  margin-right: 10px;
}

.top_msg input:last-child {
  width: 390px;
}
.t_content1 {
  padding-top: 3px;
  margin: 0 6px 0 0;
}
.vendorBrandSales input:focus {
  outline: none;
  border: 1px solid #017aff;
}
.inp {
  border: 1px solid #dbdbdb;
  border-radius: 3px;
  height: 30px;
  padding: 0 15px;
}
.a_color {
  color: #017aff;
}
.vendorBrandSales_c {
  display: flex;
  width: 100%;
  height: 82%;
}
.content1 {
  width: 30%;
  border-right: 2px solid #f4f4f4;
  padding: 2px 10px 0 0;
}
.content2 {
  width: 70%;
  padding-left: 10px;
}
.check {
  width: 90px;
  height: 40px;
  border: 1px solid #d3cdcd;
  border-radius: 5px;
  padding: 8px 0 0 7px;
}
.c2_button {
  height: 25px;
  margin: 8px 5px 0 35px;
}
.c2_button1 {
  height: 25px;
  margin: 8px 5px 0 0;
}
.date_1 {
  margin: 3px 6px 0 0;
}
.remarks_1 {
  margin: 3px 6px 0 45px;
}
.footView span {
  float: left;
  margin-right: 48px;
  line-height: 6vh;
  font-size: 14px;
}
.footView span i {
  margin-right: 5px;
}
._content {
  width: 100%;
  height: 32px;
  /* border: 1px solid black; */
  margin: 10px 0;
}

.exPort {
  width: 280px;
  height: 120px;
  background: white;
  position: absolute;
  top: 26%;
  left: 32%;
  z-index: 2;
  padding: 10px 15px;
  box-shadow: 3px 3px 3px #f4f4f4;
}
.exPort div:first-child {
  font-weight: 700;
  margin-bottom: 5px;
}
.exPort div:last-child {
  float: right;
  margin: 10px 0 0 0;
}
</style>

<style>
.vendorBrandSales .el-input__icon {
  line-height: 22px;
}
.vendorBrandSales .c_b .el-button {
  padding: 0;
}
.vendorBrandSales .top_msg input {
  width: 160px;
}
.vendorBrandSales .el-input__inner {
  height: 30px;
}
.vendorBrandSales .top_msg .el-date-editor.el-input__inner {
  width: 370px;
  height: 30px;
}
.vendorBrandSales .el-date-editor .el-range-separator {
  line-height: 22px;
  width: 10%;
}

.vendorBrandSales .el-pagination .el-select .el-input .el-input__inner,
.vendorBrandSales .el-pagination .el-select .el-input {
  width: 90px;
}
.vendorBrandSales .el-pagination {
  float: right;
  margin-top: 5px;
}
.vendorBrandSales .el-input--mini .el-input__inner {
  height: 23px;
}
.vendorBrandSales .el-table__footer td {
  height: 36px;
}

.vendorBrandSales
  .el-pagination--small
  .el-pagination__editor.el-input
  .el-input__inner {
  width: 40px;
}
</style>

<template>
  <div class="vendorBrandSales">
    <!-- 厂商品牌销售查询 -->
    <div class="top_msg">
      <p>品牌</p>
      <el-select v-model="brandedName" multiple collapse-tags>
        <el-option
          v-for="item in brandedNameList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>

      <p>货号</p>
      <input class="inp inp2" type="text" v-model="kindsNumber" />

      <p>日期</p>
      <el-date-picker
        unlink-panels
        value-format="yyyy-MM-dd"
        v-model="dateList"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      >
      </el-date-picker>

      <p>季度</p>
      <el-select v-model="quarter" multiple collapse-tags style="width: 160px">
        <el-option
          v-for="item in quarterList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
    </div>

    <div class="_content">
      <el-button icon="el-icon-search" type="primary" @click="search"
        >查询</el-button
      >
      <el-button
        icon="el-icon-upload2"
        @click="
          () => {
            this.showExport = true
          }
        "
        >导出</el-button
      >
    </div>

    <div class="vendorBrandSales_c">
      <div class="content1">
        <el-table
          :data="tableData1"
          style="width: 100%"
          height="78vh"
          highlight-current-row
          show-summary
          ref="table1"
          border
          :summary-method="getSummaries"
          :header-cell-style="{
            background: '#f4f4f4',
            padding: 0,
            height: '40px'
          }"
          :cell-style="{ padding: 0, height: '36px' }"
        >
          <el-table-column prop="kindsNumber" label="货号" width="160">
          </el-table-column>
          <el-table-column prop="colorSize" label="色码"> </el-table-column>
          <el-table-column prop="sellingPrice" label="售价"> </el-table-column>
          <el-table-column prop="onePrice" label="单价"> </el-table-column>
          <el-table-column prop="number" label="数量"> </el-table-column>
          <el-table-column prop="money" label="金额"> </el-table-column>
          <el-table-column prop="sellTime" label="客户销货日" width="100">
          </el-table-column>
          <el-table-column prop="costOne" label="成本"> </el-table-column>
          <el-table-column prop="totalCostOne" label="成本金额" min-width="100">
          </el-table-column>
        </el-table>
        <el-pagination
          small
          background
          ref="paginationLeft"
          layout="prev, pager, next, jumper, sizes"
          :page-sizes="[20, 50, 100, 200]"
          :page-size="limitLeft"
          :page-count="pagesNumLeft"
          :total="dataLenLeft"
          @current-change="handleCurrentChangeLeft"
          @size-change="handleSizeChangeLeft"
        >
        </el-pagination>
      </div>

      <div class="content2">
        <el-table
          :data="tableData2"
          style="width: 100%"
          border
          height="78vh"
          highlight-current-row
          show-summary
          ref="table2"
          :summary-method="getSummaries"
          :header-cell-style="{
            background: '#f4f4f4',
            padding: 0,
            height: '40px'
          }"
          :cell-style="{ padding: 0, height: '36px' }"
        >
          <el-table-column prop="styleNumber" label="款号" width="160">
          </el-table-column>
          <el-table-column prop="colorNoName" label="颜色" min-width="100">
          </el-table-column>
          <el-table-column prop="c05" label="05-XS"> </el-table-column>
          <el-table-column prop="c07" label="07-S"> </el-table-column>
          <el-table-column prop="c09" label="09-M"> </el-table-column>
          <el-table-column prop="c11" label="11-L"> </el-table-column>
          <el-table-column prop="c13" label="13-XL"> </el-table-column>
          <el-table-column prop="c15" label="15-2L"> </el-table-column>
          <el-table-column prop="c17" label="17-3L"> </el-table-column>
          <el-table-column prop="c19" label="19-4L"> </el-table-column>
          <el-table-column prop="c21" label="21-5L"> </el-table-column>
          <el-table-column prop="c23" label="23-6L"> </el-table-column>
          <el-table-column prop="f" label="F"> </el-table-column>
          <el-table-column prop="sum" label="小计"> </el-table-column>
          <el-table-column prop="sellingPrice" label="售价"> </el-table-column>
          <el-table-column prop="onePrice" label="单价"> </el-table-column>
          <el-table-column prop="money" label="金额" width="120">
          </el-table-column>
          <el-table-column prop="costOne" label="成本"> </el-table-column>
          <el-table-column prop="totalCostOne" label="成本金额" min-width="120">
          </el-table-column>
          <el-table-column prop="brandedName" label="品牌" width="120">
          </el-table-column>
        </el-table>
        <el-pagination
          small
          background
          ref="paginationRight"
          layout="prev, pager, next, jumper, sizes"
          :page-sizes="[20, 50, 100, 200]"
          :page-size="limit"
          :page-count="pagesNum"
          :total="dataLen"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        >
        </el-pagination>
      </div>
    </div>

    <div class="exPort" v-show="showExport">
      <div>导出方式</div>
      <el-radio v-model="exportType" label="1">导出左表</el-radio>
      <el-radio v-model="exportType" label="2">导出右表</el-radio>
      <div>
        <el-button
          @click="
            () => {
              this.showExport = false
            }
          "
          >取消</el-button
        >
        <el-button @click="exportConfirm" type="primary">确定</el-button>
      </div>
    </div>

    <!-- <foot-view class="footView">
      <div slot="text">
        <span>数据库：{{jxQuarter}}</span>
        <span>记录数：500</span>
      </div>
    </foot-view> -->
  </div>
</template>

<script>
import { getBranded } from '../../../network/branded'
import { getQuarter } from '../../../network/quarter'
import { manufacturerSell } from '../../../network/manufacturer'

import footView from '../../../components/FootView'

import today from '../../../components/mixins/today'
import enterUp from '../../../components/mixins/enterUp'

import table2excel from 'js-table2excel'
import XLSX from 'xlsx'

export default {
  name: 'vendor_brand_sales',
  mixins: [today, enterUp],
  created() {
    let jxQuarterVal = document.cookie.match(RegExp('jxQuarter' + '=([^;]+)'))
    this.jxQuarter = jxQuarterVal ? jxQuarterVal[1] : null

    this.inpList = this.getInput()
    // 默认选之前一周
    this.dateList = [this.searchDate(7), this.searchDate()]

    // 获取品牌
    getBranded({ limit: 9999 }).then((res) => {
      // console.log(res)
      if (res.data.code != 200) return
      res.data.data.forEach((e) => {
        this.brandedNameList.push({ value: e.name, label: e.name })
      })
    })

    // 获取季度
    getQuarter({ limit: 99999 }).then((res) => {
      if (res.data.code == 200) {
        res.data.data.forEach((e) => {
          this.quarterList.push({ value: e.id, label: e.name })
        })
      }
    })
  },
  data() {
    return {
      // 总数据条数
      dataLenLeft: 0,
      // 总页码
      pagesNumLeft: 0,
      // 分页条数
      limitLeft: 20,
      // 当前页码
      currentPageLeft: 1,

      // 总数据条数
      dataLen: 0,
      // 总页码
      pagesNum: 0,
      // 分页条数
      limit: 20,
      // 当前页码
      currentPage: 1,

      inpList: [],
      dateList: null,
      brandedName: [],
      brandedNameList: [],
      kindsNumber: '',
      quarter: [],
      quarterList: [],
      tableData1: [],
      tableData2: [],
      kinds: [],
      styleColor: [],
      showExport: false,
      exportType: '1',
      jxQuarter: null,
      // jxQuarter: document.cookie.match(RegExp('jxQuarter'+'=([^;]+)'))[1],

      summation: {}
    }
  },
  watch: {
    kindsNumber(a, b) {
      this.kindsNumber = a.toUpperCase().trim()
    }
  },
  components: {
    footView
  },
  methods: {
    search() {
      let bn = ''
      this.brandedName.forEach((e) => {
        if (!bn) {
          bn = `'${e}'`
        } else {
          bn = bn + ',' + `'${e}'`
        }
      })
      // let ql = ''
      // this.quarter.forEach(e => {
      //   if (!ql) {
      //     ql = `'${e}'`
      //   } else {
      //     ql = ql + ',' + `'${e}'`
      //   }
      // })
      // console.log(ql)
      this.kinds = []
      this.styleColor = []
      this.tableData1 = []
      this.tableData2 = []
      manufacturerSell({
        brandedName: bn,
        kindsNumber: this.kindsNumber,
        quarter: String(this.quarter),
        startTime: this.dateList ? this.dateList[0] + ' 00:00:00' : null,
        endTime: this.dateList ? this.dateList[1] + ' 23:59:59' : null
      }).then((res) => {
        if (res.data.code == 200) {
          this.currentPage = 1
          this.currentPageLeft = 1
          this.$refs.paginationRight.internalCurrentPage = 1
          this.$refs.paginationLeft.internalCurrentPage = 1

          let d = res.data.data
          this.kinds = d.kinds
          this.styleColor = d.styleColor

          // 色码赋值，色码是颜色加尺码
          this.summation.number = 0
          this.summation.money = 0
          this.summation.totalCostOne = 0
          this.summation.c05 = 0
          this.summation.c07 = 0
          this.summation.c09 = 0
          this.summation.c11 = 0
          this.summation.c13 = 0
          this.summation.c15 = 0
          this.summation.c17 = 0
          this.summation.c19 = 0
          this.summation.c21 = 0
          this.summation.c23 = 0
          this.summation.f = 0
          this.kinds.forEach((e) => {
            e.colorSize = e.colorName + ' ' + e.size
            e.sellTime = e.sellTime.slice(0, 10)

            this.summation.number += e.number
            this.summation.money += e.money
            this.summation.totalCostOne += e.totalCostOne
          })

          this.styleColor.forEach((e) => {
            for (const key in e) {
              if (e.hasOwnProperty(key)) {
                const element = e[key]
                if (!element) e[key] = ''
              }
            }
            e.colorNoName = e.colorNo + '.' + e.colorName
            this.summation.c05 += Number(e.c05)
            this.summation.c07 += Number(e.c07)
            this.summation.c09 += Number(e.c09)
            this.summation.c11 += Number(e.c11)
            this.summation.c13 += Number(e.c13)
            this.summation.c15 += Number(e.c15)
            this.summation.c17 += Number(e.c17)
            this.summation.c19 += Number(e.c19)
            this.summation.c21 += Number(e.c21)
            this.summation.c23 += Number(e.c23)
            this.summation.f += Number(e.f)
          })

          this.dataLen = this.styleColor.length
          this.dataLenLeft = this.kinds.length

          if (!this.dataLen) {
            this.$message('暂无数据')
          }

          this.tableData1 = this.kinds.slice(
            (this.currentPageLeft - 1) * this.limitLeft,
            this.currentPageLeft * this.limitLeft
          )
          this.tableData2 = this.styleColor.slice(
            (this.currentPageLeft - 1) * this.limitLeft,
            this.currentPageLeft * this.limitLeft
          )

          this.$nextTick(() => {
            this.$refs.table1.doLayout()
            this.$refs.table2.doLayout()
          })
        }
      })
    },
    exportConfirm() {
      this.showExport = false
      let column

      let header = {}
      //表格数据
      let data = {}
      let index = 6

      let output = {}
      let ref = ''
      let merges = []
      let wb = {}
      if (this.exportType == '1') {
        header = {
          A1: { v: '货号' },
          B1: { v: '色码' },
          C1: { v: '售价' },
          D1: { v: '单价' },
          E1: { v: '数量' },
          F1: { v: '金额' },
          G1: { v: '客户销货日' },
          H1: { v: '成本' },
          I1: { v: '成本金额' }
        }
        index = 2
        this.kinds.forEach((e) => {
          data['A' + index] = { v: e.kindsNumber }
          data['B' + index] = { v: e.colorSize }
          data['C' + index] = { v: e.sellingPrice }
          data['D' + index] = { v: e.onePrice }
          data['E' + index] = { v: e.number }
          data['F' + index] = { v: e.money }
          data['G' + index] = { v: e.sellTime }
          data['H' + index] = { v: e.costOne }
          data['I' + index] = { v: e.totalCostOne }
          index++
        })

        data['A' + index] = { v: '合计：' }
        data['B' + index] = { v: '' }
        data['C' + index] = { v: '' }
        data['D' + index] = { v: '' }
        data['E' + index] = { v: this.summation.number || '' }
        data['F' + index] = { v: this.summation.money || '' }
        data['G' + index] = { v: '' }
        data['H' + index] = { v: '' }
        data['I' + index] = { v: this.summation.totalCostOne || '' }
        index++

        // 合并 headers 和 data
        output = Object.assign({}, header, data)
        // 表格范围，范围越大生成越慢
        ref = 'A1:I' + (this.kinds.length + 10)
        //合并单元格设置
        merges = []
        // 构建 workbook 对象
        wb = {
          SheetNames: ['厂商品牌销售'],
          Sheets: {
            厂商品牌销售: Object.assign({}, output, {
              '!ref': ref,
              '!merges': merges
            })
          }
        }

        // 导出 Excel
        XLSX.writeFile(wb, '厂商品牌销售.xlsx')
      } else {
        header = {
          A1: { v: '货号' },
          B1: { v: '颜色' },
          C1: { v: '05-XS' },
          D1: { v: '07-S' },
          E1: { v: '09-M' },
          F1: { v: '11-L' },
          G1: { v: '13-XL' },
          H1: { v: '15-2L' },
          I1: { v: '17-3L' },
          J1: { v: '19-4L' },
          K1: { v: '21-5L' },
          L1: { v: '23-6L' },
          M1: { v: 'F' },
          N1: { v: '小计' },
          O1: { v: '售价' },
          P1: { v: '单价' },
          Q1: { v: '金额' },
          R1: { v: '成本' },
          S1: { v: '成本金额' },
          T1: { v: '品牌' }
        }
        index = 2
        this.styleColor.forEach((e) => {
          data['A' + index] = { v: e.kindsNumber }
          data['B' + index] = { v: e.colorName }
          data['C' + index] = { v: e.c05 }
          data['D' + index] = { v: e.c07 }
          data['E' + index] = { v: e.c09 }
          data['F' + index] = { v: e.c11 }
          data['G' + index] = { v: e.c13 }
          data['H' + index] = { v: e.c15 }
          data['I' + index] = { v: e.c17 }
          data['J' + index] = { v: e.c19 }
          data['K' + index] = { v: e.c21 }
          data['L' + index] = { v: e.c23 }
          data['M' + index] = { v: e.f }
          data['N' + index] = { v: e.sum }
          data['O' + index] = { v: e.sellingPrice }
          data['P' + index] = { v: e.onePrice }
          data['Q' + index] = { v: e.money }
          data['R' + index] = { v: e.costOne }
          data['S' + index] = { v: e.totalCostOne }
          data['T' + index] = { v: e.brandedName }
          index++
        })

        data['A' + index] = { v: '合计：' }
        data['B' + index] = { v: '' }
        data['C' + index] = { v: this.summation.c05 || '' }
        data['D' + index] = { v: this.summation.c07 || '' }
        data['E' + index] = { v: this.summation.c09 || '' }
        data['F' + index] = { v: this.summation.c11 || '' }
        data['G' + index] = { v: this.summation.c13 || '' }
        data['H' + index] = { v: this.summation.c15 || '' }
        data['I' + index] = { v: this.summation.c17 || '' }
        data['J' + index] = { v: this.summation.c19 || '' }
        data['K' + index] = { v: this.summation.c21 || '' }
        data['L' + index] = { v: this.summation.c23 || '' }
        data['M' + index] = { v: this.summation.f || '' }
        data['N' + index] = { v: this.summation.number || '' }
        data['Q' + index] = { v: this.summation.money || '' }
        data['S' + index] = { v: this.summation.totalCostOne || '' }
        index++

        // 合并 headers 和 data
        output = Object.assign({}, header, data)
        // 表格范围，范围越大生成越慢
        ref = 'A1:T' + (this.styleColor.length + 10)
        //合并单元格设置
        merges = []
        // 构建 workbook 对象
        wb = {
          SheetNames: ['厂商品牌销售'],
          Sheets: {
            厂商品牌销售: Object.assign({}, output, {
              '!ref': ref,
              '!merges': merges
            })
          }
        }

        // 导出 Excel
        XLSX.writeFile(wb, '厂商品牌销售.xlsx')
        return
        column = [
          { key: 'kindsNumber', title: '货号', type: 'text' },
          { key: 'colorName', title: '颜色', type: 'text' },
          { key: 'c05', title: '05-XS', type: 'text' },
          { key: 'c07', title: '07-S', type: 'text' },
          { key: 'c09', title: '09-M', type: 'text' },
          { key: 'c11', title: '11-L', type: 'text' },
          { key: 'c13', title: '13-XL', type: 'text' },
          { key: 'c15', title: '15-2L', type: 'text' },
          { key: 'c17', title: '17-3L', type: 'text' },
          { key: 'c19', title: '19-4L', type: 'text' },
          { key: 'c21', title: '21-5L', type: 'text' },
          { key: 'c23', title: '23-6L', type: 'text' },
          { key: 'f', title: 'F', type: 'text' },
          { key: 'sum', title: '小计', type: 'text' },
          { key: 'sellingPrice', title: '售价', type: 'text' },
          { key: 'onePrice', title: '单价', type: 'text' },
          { key: 'money', title: '金额', type: 'text' },
          { key: 'costOne', title: '成本', type: 'text' },
          { key: 'money', title: '成本金额', type: 'text' },
          { key: 'brandedName', title: '品牌', type: 'text' }
        ]
        table2excel(column, this.styleColor, '厂商品牌销售.xls')
      }
    },

    // 每页显示页数改变
    handleSizeChange(val) {
      this.limit = val
      this.tableData2 = this.styleColor.slice(
        (this.currentPage - 1) * this.limit,
        this.currentPage * this.limit
      )
    },
    // 当前页改变
    handleCurrentChange(val) {
      this.currentPage = val
      this.tableData2 = this.styleColor.slice(
        (this.currentPage - 1) * this.limit,
        this.currentPage * this.limit
      )
    },

    handleSizeChangeLeft(val) {
      this.limitLeft = val
      this.tableData1 = this.kinds.slice(
        (this.currentPageLeft - 1) * this.limitLeft,
        this.currentPageLeft * this.limitLeft
      )
    },
    handleCurrentChangeLeft(val) {
      this.currentPageLeft = val
      this.tableData1 = this.kinds.slice(
        (this.currentPageLeft - 1) * this.limitLeft,
        this.currentPageLeft * this.limitLeft
      )
    },

    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
          return
        }
        const prop = column.property
        switch (prop) {
          case 'sum':
            sums[index] = this.summation.number || ''
            break
          case 'number':
            sums[index] = this.summation.number || ''
            break
          case 'money':
            sums[index] = this.summation.money || ''
            break
          case 'totalCostOne':
            sums[index] = this.summation.totalCostOne || ''
            break
          case 'c05':
            sums[index] = this.summation.c05 || ''
            break
          case 'c07':
            sums[index] = this.summation.c07 || ''
            break
          case 'c09':
            sums[index] = this.summation.c09 || ''
            break
          case 'c11':
            sums[index] = this.summation.c11 || ''
            break
          case 'c13':
            sums[index] = this.summation.c13 || ''
            break
          case 'c15':
            sums[index] = this.summation.c15 || ''
            break
          case 'c17':
            sums[index] = this.summation.c17 || ''
            break
          case 'c19':
            sums[index] = this.summation.c19 || ''
            break
          case 'c21':
            sums[index] = this.summation.c21 || ''
            break
          case 'c23':
            sums[index] = this.summation.c23 || ''
            break
          case 'f':
            sums[index] = this.summation.f || ''
            break
        }
        let decimal = sums[index] ? sums[index].toString().split('.')[1] : ''
        if (decimal && decimal.length > 2) {
          sums[index] = sums[index].toFixed(2)
        }
      })
      return sums
    }
  }
}
</script>
